<template>
    <div>
        <v-dialog
            title="应付调整"
            :show.sync="dialogVisible"
            :destroy-on-close="true"
            @beforeClose="beforeClose"
            width="1200px"
        >
            <el-form ref="editForm" :model="form1" class="form-wrap" size="small" :rules="rules">
            <el-row style="text-align: right">
                <el-button type="primary" size="small" @click="print">导出</el-button>
            </el-row>
            <div id="printAccountsTemplate">
                <el-row  style="font-size: 24px;text-align: center;padding-top: 15px">
                    福田物管中心租赁社会物业支付明细表
                </el-row>
                <el-row style="margin-left: 30px;padding-top: 30px;font-size: 18px">
                    单位名称：福田区物业管理中心
                </el-row>
                <div class="table-div">
                    <table class="table">
                        <tbody>
                        <tr>
                            <th rowspan="11">物业租金支付明细</th>
                            <th>对方单位名称</th>
                            <td colspan="5">福田区物业管理中心</td>
                        </tr>
                        <tr>
                            <th>面积(m²)</th>
                            <td colspan="5">{{data.lessorContract.buildingArea}}</td>
                        </tr>
                        <!--<tr>
                            <th>单价(元/m²/月)</th>
                            <td colspan="5">{{data.rentContract.rentAmount}}</td>
                        </tr>-->
                        <tr>
                            <th>本次应付租金(元)</th>
                            <td colspan="2">{{data.lessorContract.rentAmount}}</td>
                            <th align="center">应付调整(元)</th>
                            <td colspan="2">
                                <el-input   v-model="form1.adjustmentAmount"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <th>合同期限</th>
                            <td colspan="5">{{data.lessorContract.startDate}}至{{data.lessorContract.endDate}}</td>
                        </tr>
                        <tr>
                            <th>合同总租金(元)</th>
                            <td colspan="5">{{data.accumulatedAmountPayableCount}}</td>
                        </tr>
                        <tr>
                            <th>合同累计已付金额(元)</th>
                            <td colspan="5">{{data.accumulatedAmountPayable}}</td>
                        </tr>
                        <!--<tr>
                            <th>本次申请付款金额(元)</th>
                            <td colspan="5">{{data.amountOfReceivables}}</td>
                        </tr>-->
                        <tr>
                            <th>本次申请付款金额期间</th>
                            <td colspan="5">{{data.lessorPayable.costPeriodStart}}至{{data.lessorPayable.costPeriodEnd}}</td>
                        </tr>
                        <tr>
                            <th>合同租金余款(元)</th>
                            <td colspan="5">{{data.accumulatedSurplus}}</td>
                        </tr>
                        <tr>
                            <th>制表人</th>
                            <td colspan="2">{{form.createName}}</td>
                            <th align="center">时间</th>
                            <td colspan="2">{{form.createTime}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <el-form-item label="备注" class="full" prop="remarks">
                <el-input v-model="form1.remarks" type="textarea" placeholder="请输入"></el-input>
            </el-form-item>
            <div class="data-title">上传文件</div>
            <file-up-loud type="file"
                          ref="receivable"
                          :url="fileUploadUrl"
                          @onSuccess="onSuccess"
                          @onError="onError"
                          @beforeUpload="beforeUpload"
                          @handleClean="handleClean"
                          :propsFileList="uploadFileList"
                          :isShowFileList="true"
                          :loadFileList="fileList"
                          :isView=false>costPeriodArr
            </file-up-loud>
            <div class="card-box" style="text-align: right">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" size="small" @click="commit">保存并发起审批</el-button>
            </div>
            </el-form>
        </v-dialog>
    </div>
</template>

<script>
    import engineerList from '@/components/engineer-list'
    import printJS from 'print-js'
    import {addObj,getLessorPayableDetailVOList} from '../../api/lessor-payable-adjustment-approval'
    import BaseLoad from '@/assets/vue-mixin/BaseLoad'
    import fileUpLoud from '@/components/upload-media'
    import { doubleValidate} from '~/utils/validate.js'
    export default {
        mixins: [BaseLoad],
        components: { engineerList,fileUpLoud},
        name: "edit-accounts",
        data(){
            return{
                fileUploadUrl: '/admin/sys-file/upLodeFileEdit',
                uploadFileList: [],
                fileList: [],
                fileSize: 50,
                modelType: 'lessorfinance',
                busIdPropertyName: 'approvalId',
                form:{

                },form1:{
                    adjustmentAmount : "",
                    remarks:"",
                    payableId:"",
                    status:"01"
                },
                data:{
                    lessorContract:{
                    },
                    lessorPayable:{}
                },

                nowTime: new Date(),
                dialogVisible:false,
                rules: {
                    adjustmentAmount: [{required: true, message: '请输入本次应付调整金额', trigger: 'blur'},
                        { validator: doubleValidate, trigger: "change"},],
                }
            }
        },
        methods:{
            show(item){
                this.dialogVisible=true
                this.form=item
                getLessorPayableDetailVOList(this.form.lessorContractId,this.form.payableId).then(resp => {
                    this.data = resp.data.data;
                })
            },

            commit() {
                this.$refs.editForm.validate(valid => {
                    if (valid) {
                        this.$refs.receivable.submit(this.modelType, this.busId);
                    }
                })
            },
            onSuccess(rep, file, fileList){
                //文件上传成功，开始保存表单
                this.loadClose()
                if (rep.data) {
                    this.sendFormData(rep.data)
                } else {
                    this.loadClose()
                    this.err('提交失败')
                }
            },
            onError(err, file, fileList) {
                this.loadClose()
                this.err('提交失败')
            },
            beforeUpload() {
                this.loadAction('请稍等...')
            },
            sendFormData(val){
                this.loadAction('请稍等...')
                //this.form.receivableId = val
                this.form1.payableId = this.data.lessorPayable.payableId
                addObj(this.form1).then(resp => {
                    if (resp.data.data) {
                        this.suc('添加成功')
                        this.$refs.editForm.resetFields()
                        this.handleCancel()
                        this.loadClose()
                        this.$emit('resetList')
                    } else {
                        this.err('添加失败')
                        this.loadClose()
                    }
                })
            },
            handleClean(file) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delFiles(file.fileId, this.modelType).then(resp => {
                        if (resp.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.fileList = this.fileList.filter(file => file.fileId != fileId)
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            print(){
                printJS({
                    printable: 'printAccountsTemplate',
                    type: 'html',
                    maxWidth:1000,
                    style: '.no-print{width: 0px} @page{size: auto A2 portrait;margin: 3mm;} @media print {' +
                        '.card-box {margin-left: -80px;width: 100%;margin-bottom: 14mm;border-bottom: 0;}' +
                        '.data-info{} ' +
                        '} ',
                    gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                    gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                    repeatTableHeader: true,
                    scanStyles:true,
                    targetStyles: ['*'],
                    ignoreElements:['no-print']
                })
            },
            beforeClose(done) {
                done()
            },
            handleCancel() {
                this.dialogVisible = false
                //this.handleEmpty()
            },
        },
    }
</script>

<style lang="scss" scoped>

    table{
        border: solid #bfbfbf 1px;
        border-collapse: collapse;
        padding: 10px 20px;
        max-width: 100%;
    }
    th{
        border: solid #bfbfbf 1px;
    }
    tr{
        height: 50px;
    }
    td{
        border: solid #bfbfbf 1px;
        padding: 10px 20px;
    }
    .table{
        align-content: center;
        vertical-align: center;
        text-align: center;
    }
    .table-div{
        width: 96%;
        align-content: center;
        margin: 30px auto;
    }
    
    @include info-list(1);
    @include formWrap(1);
</style>
